import React, { Component } from 'react'
import {Button  , Form, Input, Message, MessageBox, Select, Table,Tag,Pagination,Loading} from 'element-react'
import { Badge } from 'element-react/next'

export default class Userpage extends Component {
    url = "/device/userbaiseinfo/"
    componentDidMount(){
        fetch(this.url+"/list").then(data=>data.json())
        .then(result=>{
            this.setState({
              data:result.page.list,
              page:{
                pageCount:result.page.totalPage,
                pageSize:result.page.pageSize,
                currentPage:result.page.currPage,
              }
            }
            )
        })
    }

    roleicon = {
      1:{
        name: '普通人员', 
        type: 'primary'
      } , 
      2:{
        name: '设备审批人', 
        type: 'success'
      } , 
      3:{
        name: '设备维护人', 
        type: 'warning'
      }, 
      4:{
        name: '管理员', 
        type: 'danger'
      } 
    }
    state = {
        fullscreen : false ,
        page:{
          pageCount:"",
          pageSize:"",
          currentPage:"",
        },
        data:[],
        table: {
            columns: [
                {
                  label: "编号",
                  prop: "id",
                  width: 180,
                  fixed: 'left',
                  align: 'center'
                  
                },
                {
                  label: "账号",
                  prop: "account",
                  align: 'center'
                 
                },
                {
                  label: "角色",
                  prop: "role",
                  align: 'center' ,
                  render:(row, column, index)=>{
                    return (
                      <Tag
                      type={this.roleicon[row.role].type}
                      >{this.roleicon[row.role].name}</Tag>
                    )
                  }
                 
                },
                {
                  label: "名字",
                  prop: "name",
                  align: 'center'
                },
                {
                  label: "操作",
                  width: 240,
                  fixed: 'right',
                  render: (row, column, index)=>{
                    return (
                      <span style={{display:"flex"}}>
                        <Button plain={true} type="info" size="small" onClick={this.getUserInfo.bind(this , index)}>修改</Button>
                        <Button type="danger" size="small" onClick={this.removeUser.bind(this , index)}>移除</Button>
                      </span>
                      )
          
                  },
                  align: 'center'
                }
              ],   
        },
        option:[
          {
            value:1 ,
            label:"普通人员"
          },
          {
            value:2 ,
            label:"设备审批人"
          },
          {
            value:3 ,
            label:"设备维护人"
          },
          {
            value:4 ,
            label:"管理员"
          },{
            value:5 , 
            label:"购入审批人"
          }
        ],
        userform:{
          role:1,
          account:"",
          pwd:"",
          name:""
        }
    }
  
  showApproverInfo = (id)=> {
    this.setState({fullscreen:true});
    fetch("/device/userbaiseinfo/getapproverinfo",{
      method:"POST",
      headers:{
        "Content-Type": "application/json",
      },
      body:JSON.stringify({id})
    }).then(data=>data.json())
    .then(result=>{
      this.setState({fullscreen:false});
      MessageBox.msgbox({
        message:(
          <Form>
            <Form.Item label='当前审批设备类型'>
              <Tag
               type={"success"}
              >{result.label}</Tag>
            </Form.Item>
            <Form.Item label='修改审批'>
              <Select value={result.label}>
                  <Select.Option key={1} label="d"/>
              </Select>
            </Form.Item>

          </Form>
        ),
        showCancelButton:true
      })
    })
  }

  getUserInfo(index) {
    const {role ,id} = this.state.data[index] ;
    switch(role){
      case 2 :
        this.showApproverInfo(id)
        break;
      default: break ;
    }
  }

  addUser =()=>{
    MessageBox.msgbox({
      title:"新增",
      message:(
        <div>
          <Form>
            <Form.Item label='角色'>
              <Select onChange={(e)=>{this.state.userform.role=e}}>
                {
                  this.state.option.map(el=>{
                    return (
                      <Select.Option key={el.value} label={el.label} value={el.value}/>
                    )
                  })
                }
              </Select>
            </Form.Item>
            <Form.Item label='名字'>
              <Input onChange={(e)=>{this.state.userform.name = e}}></Input>
            </Form.Item>
            <Form.Item label='账户'>
              <Input onChange={(e)=>{this.state.userform.account = e}}></Input>
            </Form.Item>
            <Form.Item label='密码'>
              <Input onChange={(e)=>{this.state.userform.pwd = e}}></Input>
            </Form.Item>
          </Form>
        </div>
      ) ,
      showCancelButton: true
    }).then((action)=>{
        if(action==="confirm") {
          fetch(this.url+"save",{
            method:"POST",
            headers:{
              "Content-Type": "application/json",
            },
            body:JSON.stringify(this.state.userform)
          }).then(data=>data.json())
          .then(result=>{
              var newdata = {...this.state.userform}
              newdata.id = result.id
              this.setState({data:[...this.state.data,newdata]})
              Message({
                message: '操作成功',
                type: result.msg 
              })
          })
        }
    })
  }

  removeUser(index){
    const {id} = this.state.data[index] ;
    fetch(this.url+"delete", {
      method:"POST",
      headers:{
        "Content-Type": "application/json",
      },
      body:JSON.stringify([id])
    }).then(data=>data.json())
    .then(result=>{
        Message({
          type:result.msg , 
          message:"操作成功"
        })
        this.state.data.splice(index , 1) ;
        this.setState({data:[...this.state.data]})
    })
  }

  pagechange = (currentPage)=>{
    fetch(this.url+"list",{
      method:"POST",
      headers:{
        "Content-Type": "application/json",
      },
      body:JSON.stringify({page:currentPage})
    }).then(data=>data.json())
    .then(result =>{
      result.page.list.map((e)=>{
        e.lable = this.state.currentnode.label
        return e 
      })
      this.setState({data:result.page.list , page :{
        pageCount:result.page.totalPage,
        pageSize:result.page.pageSize,
        currentPage:result.page.currPage,
      }})

    })
  }

  render() {    
    return (
      <div>
        <Button onClick={this.addUser}>人员新增</Button>
          <Table 
            width={"100%"}
            columns={this.state.table.columns}
            maxHeight={200}
            data={this.state.data}
          />
            <div className="block" style={{}}>
              <Pagination layout="prev, pager, next" 
              pageCount={this.state.page.pageCount} 
              pageSize={this.state.page.pageSize}
              currentPage={this.state.page.currentPage}
              onCurrentChange={this.pagechange}/>
            </div>
            {
              this.state.fullscreen && <Loading fullscreen={true} />
            }
      </div>
    )
  }
}

